<template>
	<view class="container-bottom-btns">
		<video v-if="teacherInfo.videoUrl" :src="teacherInfo.videoUrl" :custom-cache="false" :autoplay="false" controls class="video" ></video>
		
		<view class="teacher-item">
			<view class="info flex-x-bet-y-center">
				<view class="flex-y-center">
					<image src="../../static/images/default-avatar.png" v-if="!teacherInfo.sysUser.avatar" class="avatar" mode=""></image>
					<image :src="teacherInfo.sysUser.avatar | formatFile" class="avatar" mode="" v-else></image>
					<text class="name">{{teacherInfo.sysUser.nickName}}</text>
				</view>
				<view class="tag-list flex-y-center">
					<view class="tag-item" v-for="(tag, index) in teacherInfo.tagName">{{tag}}</view>
				</view>
			</view>
			<view class="intro">
				<view class="intro-title">个人介绍</view>
				<view class="intro">{{teacherInfo.intro}}</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper flex-y-center">
			<button open-type="share" class="cancel-btn btn">分享</button>
			<view class="submit-btn btn" @tap="coursePopupOpen">立即预约</view>
		</view>
		
		<my-popup ref="coursePopup" mode="bottom" :closeable="false">
			<view class="course-popup">
				<view class="title">课程分类</view>
				<view class="category-list">
					<view class="category-item" v-for="(item, index) in courseTagList" @tap="categoryChange(index)" :class="{active: categoryIndex == index}">{{item.courseTagName}}</view>
				</view>
				<view class="title">选择课时包</view>
				<view class="category-list">
					<view class="category-item" v-for="(item, index) in lessonNumList" :class="{active: hourIndex == index}" @tap="hourChange(index)">{{item.lessonNum}}节</view>
				</view>
				
				<view class="price-wrapper flex-x-bet-y-center">
					<view class="left flex-y-center">
						<text>费用：</text>
						<text style="color:#EC1328;">￥{{totalPrice}}</text>
					</view>
					<view class="right-btn flex-xy-center" @tap="chooseTime">去选择时段</view>
				</view>
			</view>
		</my-popup>
		
		
	</view>
</template>

<script>
	import { getTeacherInfo, getCourseTagList, getLessonNumList } from '@/api/common.js'
	import { login } from '@/utils/login.js'
	import filters from '@/utils/filters.js'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		data() {
			return {
				categoryIndex: -1,
				hourIndex: -1,
				teacherId: '',
				teacherInfo: {
					sysUser:{}
				},
				shareObj: {
					title: '私教详情',
					path: '/pages/teacher/detail?teacherId='
				},
				courseTagList: [],
				lessonNumList: [],
				totalPrice: 0
			};
		},
		onLoad(option){
			this.teacherId = option.teacherId
			this.shareObj.path += this.teacherId
			this.getTeacherInfo()
			this.getCourseTagList()
			this.getLessonNumList()
		},
		computed:{
			...mapGetters(["isLogin"])
			
		},
		onShareAppMessage() { // 分享到微信
		  // 更多参数配置，参考文档
		  return this.shareObj
		},
		onShareTimeline() { // 分享到朋友圈
		  return this.shareObj
		},
		methods:{
			getTeacherInfo(){
				getTeacherInfo(this.teacherId).then(res => {
					res.data.tagName = res.data.tagName.split(',')
					this.teacherInfo = res.data
				})
			},
			getCourseTagList(){
				getCourseTagList({pageNum: 1, pageSize: 999}).then(res => {
					this.courseTagList = res.rows
				})
			},
			getLessonNumList(){
				getLessonNumList({pageNum: 1, pageSize: 999}).then(res => {
					this.lessonNumList = res.rows
				})
			},
			coursePopupOpen(){
				if(this.isLogin){
					this.$refs.coursePopup.open()
				}
				else{
					this.$refs.modal.open({
						content: '您还未登录, 请登录后操作',
						confirmText: '去登录',
						zIndex: 99999,	// 登录弹窗层级置顶
						success: () => {
							login()
						}
					})
				}
			},
			categoryChange(index){
				this.categoryIndex = index
			},
			hourChange(index){
				this.hourIndex = index
				const num = this.lessonNumList[this.hourIndex].lessonNum;
				this.totalPrice = filters.formatNumber(this.teacherInfo.lessonPrice * Number(num));
			},
			chooseTime(){
				if(this.categoryIndex < 0){
					return this.toast('请选择课程分类');
				}
				if(this.hourIndex < 0){
					return this.toast('请选择课时包');
				}
				this.$store.commit('order/SET_COURSETAG', this.courseTagList[this.categoryIndex]);
				this.$store.commit('order/SET_LESSONNUM', this.lessonNumList[this.hourIndex])
				this.$store.commit('order/SET_TEACHERID', this.teacherId)
				this.navTo("/pages/teacher/choose_time")
			}
		}
	}
</script>

<style lang="scss">
	.video{
		width: 100%;
		height: 380rpx;
	}
	
	.teacher-item {
		padding: 40rpx 30rpx;
		margin: 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 35rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 26rpx;
		
		.info {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f3f3f3;
			
			.avatar {
				width: 92rpx;
				height: 92rpx;
				margin-right: 30rpx;
				border-radius: 50%;
				
			}
		
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		
			.tag-list {
				display: flex;
				flex-wrap: wrap;
				margin-left: 30rpx;
				
				.tag-item {
					padding: 4rpx 10rpx;
					background-color: $theme-color;
					font-size: 24rpx;
					color: #fff;
					border-radius: 6rpx;
					margin-right: 15rpx;
					margin-top: 10rpx;
				}
			}
		}
		
		.intro {
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			line-height: 44rpx;
			white-space: pre-line;
		}
	}
	
	.intro-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 40rpx 0;
	}
	
	.btn{
		flex:1;
	}
	
	.btn:first-of-type{
		margin-right: 30rpx;
	}
	
	.course-popup{
		width: 100%;
		background: #FFFFFF;
		
		.title{
			padding: 40rpx 30rpx 0;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		
		.category-list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx;
			
			.category-item{
				margin: 30rpx 30rpx 0 0;
				background: #F8F9FB;
				border: 1rpx solid #F8F9FB;
				padding: 15rpx 40rpx;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			
			.active{
				background: #FFFAF7;
				border: 1rpx solid $theme-color;
				color: $theme-color;
				
			}
		}
	
		.price-wrapper{
			margin-top: 40rpx;
			height: 118rpx;
			padding-left: 30rpx;
			box-shadow: 0px 2rpx 20rpx 0px rgba(0,0,0,0.1);
		}
		
		.right-btn{
			width: 312rpx;
			height: 100%;
			background: $theme-color;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
</style>
